<template>
  <div class="container">
    <div class="header">
      <b-header> </b-header>
    </div>
    <div class="silder">
      <b-slide></b-slide>
    </div>
    <br />
    <div class="content">
      <b-content></b-content>
    </div>
    <div class="footer">
      <b-footer></b-footer>
    </div>
  </div>

</template>

<script>
import BHeader from "../components/home/BHeader.vue";
import BContent from "../components/home/BContent.vue";
import BFooter from "../components/home/BFooter.vue";
import BSlide from "../components/home/BSlide.vue";
export default {
  name: "BHome",
  components: {
    BHeader,
    BSlide,
    BContent,
    BFooter,
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  width: 100%;
  flex-direction: column;
}
.header {
  height: 19vh;
  width: 100%;
}
.silder {
  height: 70vh;
  width: 100%;
}
.content {
  height: 190vh;
  width: 100%;
}
.footer {
  height: 40vh;
  width: 100%;
}
</style>
